<template>
    <fieldset>
        <legend>插槽</legend>
        <h1>一个组件</h1>
        <parent>
            <!-- vue2的写法 -->
            <template v-slot:memo>
                <h1>4G内存条</h1>
                <h1>6G内存条</h1>
            </template>
            <template v-slot:cpu>
                <h1>i9 16核 72线程 第十代 4.7hz</h1>
            </template>
            <template v-slot:display-card="{d}">
                <h1 v-for="item in d">RTX 4080Ti * 4---{{ item }}</h1>
            </template>
            <!-- 非具名内容 -->
            <template v-slot="{abc}">
                <h2>水冷散热器----{{ abc }}</h2>
            </template>
            <!-- vue3的语法 -->
            <template #disk="{e}">
                <h1>Samsung M2.0 2T * 2</h1>
                {{ e }}
            </template>

        </parent>
    </fieldset>
</template>
<script>

//插槽的作用:用于扩展组件的结构

//主要应用在组件的封装,一个组件封装之后,不会修改组件的源码,我们要做的是,通过组件封装的属性进行参数传递,达到复用的效果

//具名插槽:组件传递的结构,分发到组件内部指定的位置

//插槽作用域:从组件的源码中,将数据传递出来,给组件标签中间的扩展内容使用

import parent from "./01.parent.vue"

export default {
    components: {
        parent
    }
}
</script>